import createdName from '../../../utils/createdName'
export default {
  name: createdName('Image'),
  props: {
    src: {
      type: String,
      default: '',
      note: '图片资源',
    },
    errorUrl: {
      type: String,
      default: '',
      note: '加载失败的图片资源'
    },
    size: {
      type: String | Number,
      default: 'large',
      option: ['large', 'medium', 'small'],
      note: '图片大小，也可是数字'
    },
    shape: {
      type: String,
      default: 'circle',
      option: ['circle', 'square'],
      note: '图片形状'
    },
    fit: {
      type: String,
      default: 'cover',
      option: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      note: '图片填充类型'
    }
  },
  computed: {
    getSize () {
      if (isNaN(Number(this.size))) {
        return null
      } else {
        return {
          width: this.size + 'px',
          height: this.size + 'px',
          lineHeight: this.size + 'px'
        }
      }
    }
  },
  render (h) {
    const _self = this;
    return h('span', {
      class: ['yc-image', 'yc-image--' + _self.shape, !_self.getSize && 'yc-image--' + _self.size],
      style: _self.getSize
    }, [
      h('img', {
        attrs: {
          src: _self.src,
        },
        style: { 'object-fit': _self.fit }
      })
    ])
  }
}